<template>
    <div   class="zlst-table" >

        <!--表格主体-->
        <Table class="table" :stripe="true"  @on-selection-change="onSelectChange" v-show="!addModalSwitch " v-if="loadComplied"  :columns="columns" :data="data1"   :height="tableHeight">

            <!--表头  按钮和搜索区域-->
            <div slot="header" class="headerArea" >

                <Input v-model="searchText" placeholder="请输入车牌号、车辆类型..." @on-enter="queryList(true)"   style="width:400px;margin-left: 20px;height:40px;float: left;padding-right: 32px"></Input><span @click="queryList(true)"><Icon size="24"  type="ios-search" color="#a8afb2" style="margin-left: -60px;position: absolute;margin-top: 17px"></Icon></span>
                <div style="float: right;height: 50px">

                    <span><i @click="openForm"  class="iconfont icon-plus" > 添加</i></span>
                    <span><i  @click="openBatch" class="iconfont icon-icon-batch" style="margin-right: 35px"> 批量</i></span>
                </div>

            </div>

            <!--表尾   放分页栏和批量模式按钮-->
            <div slot="footer" class="footer" style="height: 60px;line-height: 42px;text-align: left;text-align: left" v-show="!batch">
                <Page show-sizer  size="small" :current="currentPage" @on-change="onPageChange"  @on-page-size-change="onPageSizeChange"  :total="total"   :page-size="pageSize"   show-elevator show-total :placement="'top'"  style="margin-left: 10px;" :page-size-opts="[5,10, 20, 30, 40]"></Page>
            </div>

            <div slot="footer" class="footer"  v-if="batch" style="text-align: center">
                <div >
                    <Button @click="deleteDriverAll"  type="text" style="line-height: 16px;font-size: 16px;"><Icon :size="16" type="trash-a" ></Icon > 删除</Button>
                    <b style="color: black">|</b>
                    <Button @click="selectAll" type="text" style="line-height: 16px;font-size: 16px;"><Icon :size="16" type="android-done-all" ></Icon > 全选</Button>
                    <b style="color: black">|</b>
                    <Button @click="unSelectAll" type="text" style="line-height: 16px;font-size: 16px;"><Icon :size="16" type="android-done-all" ></Icon > 反选</Button>
                </div>
            </div>

        </Table>

    </div>
</template>

<script>

    //  指向当this不指向vue实例时的vue实例
    var that

    import Ajax from '../../js/Ajax/index.js'

    Ajax.init({
        baseUrl: '',          // 是否设置 http(s)://***.com/, 即 http_origin，默认为空
        apiList: {}    // http请求地址的字典型
        // checkToken: false     // 是否在每个请求的头部设置token，默认为true
    })

    var getData = Ajax.methods

    export default {
        data () {
            return  {
                tableHeight:500,
                currentPage:1,
                loadComplied:false,
                total:0,
                pageSize:10,
                searchText: '',
                selects:[],
                editFlag:true,
                deleteIds:[],
                deleteAllFlag: false,
                batch: false,
                errorMsg:'',
                driverId:'',
                deleteModalSwitch:false,
                addModalSwitch: false,
                modalWidth:window.innerWidth * 0.7,
                columns: [
                    {
                        title: '车牌号',
                        align: 'center',
//						key: 'licensePlateNumber',
                        render: (h, params) => {
                            const row = params.row;
                            const text = row.licensePlateNumber;
                            return h('span', {
                                style: {
                                    color: '#3fa9f5',
                                    cursor: 'pointer'
                                },
                                on: {
                                    click: () => {
                                        that.lookDetails(params.row);
//                    console.info(that)
//                    console.info(this)
//										that.lookDetails(params.row);
                                    }
                                }
                            }, text)
                        }
                    },
                    {
                        title: '车辆类型',
                        key: 'isTrailer',
                        align: 'center',
                        render: (h, params) => {
                            const isTrailer = params.row.isTrailer;
                            var text = isTrailer == 0 ? '一体车' : isTrailer == 1 ? '挂车' : '牵引车';
                            return h('span', text);
                        },
                    },
                    {
                        title: '载重(T)',
                        align: 'center',
                        key: 'weightLimit'
                    },
                    {
                        title: '体积(M³)',
                        align: 'center',
                        key: 'volumeLimit'
                    },
                    {
                        title: '车长(M)',
                        align: 'center',
                        key: 'fullLength'
                    },
                    {
                        title: '所服务机构',
                        align: 'center',
                        key: 'curPos'
                    },
                    {
                        title: '信誉等级',
                        align: 'center',
                        key: 'creditLevel',
                        render: (h, params) => {
                            const row = params.row
                            const stars = row.creditLevel;
                            return h('Rate', {
                                props: {
                                    disabled: true,
                                    value: parseInt(stars), //转整型
                                }
                            })
                        }
                    },
                    {
                        title: '车辆状态',
                        key: 'status',
                        align: 'center',
                        sortable: true,
                        render: (h, params) => {
                            const row = params.row;
                            const color = row.status == 1 ? '#506470' : '#f4ba4a';
                            const text = row.status == 1 ? '启用' : '禁用';
                            return h('div',{style:{align:'center',color: color}},text)
                        },
                    },
                    {
                        title: '操作',
                        key: 'postName',
                        align: 'center',
//						fixed: 'right',
                        render: (h, params) => {
                            const row = params.row;
                            const btn = row.flowStatus === 1 ? false : true;
                            const forbidden = row.status === 1 ? '禁用' : '启用';
                            const list = ['车辆详细', '车辆日志', '提交', '编辑'];
                            //							operationLocation =
                            return h('div', {
                                'class': {
                                    operationDiv: true,
                                },
                            }, [
                                h('Poptip', {
                                    props: {
                                        trigger: 'click',
                                        placement: this.operationLocation
                                    },
                                }, [
                                    h('span', {
                                        style: {
                                            color: '#3fa9f5'
                                        }
                                    }, '详情'),
                                    h('Icon', {
                                        props: {
                                            type: 'chevron-down',
                                        },
                                        'class': {
                                            operationIcon: true,
                                        }
                                    }),
                                    h('div', {
                                        slot: 'content',
                                        style: {
                                            borderRadius: '0px',
                                            textAlign: 'left',
                                        },
                                    }, [
                                        h('ul', list.map(item => { //循环遍历
                                            return h('li', {
                                                style: {
                                                    textAlign: 'left',
                                                }
                                            }, [
                                                h('Button', {
                                                    props: {
                                                        type: 'text',
                                                    },
                                                    'class': {
                                                        operationBtn: true,
                                                    },
                                                    on: {
                                                        click: () => {
                                                            if(item == "车辆日志") {
                                                                //																alert(par.index());
                                                            }
                                                            if(item == "车辆详细") {
                                                                that.lookDetails(params.row);
                                                            }
                                                            if(item == "编辑") {
                                                                if(row.flowStatus == 0) { // 待审核状态不可编辑
                                                                    that.$Notice.warning({
                                                                        title: '此状态下不可编辑！',
                                                                        duration: 1
                                                                    });
                                                                } else {
                                                                    this.editData(params.row);
                                                                }

                                                            } else if(item == '提交') {
                                                                if(row.flowStatus == 3) {
                                                                    that.commitInfo(row.vehicleId, 0);
                                                                } else {
                                                                    this.$Notice.warning({
                                                                        title: '此状态下不可提交！',
                                                                        duration: 1
                                                                    });
                                                                }
                                                            }

                                                        }
                                                    }
                                                }, item),
                                            ])
                                        })),
                                        h('div', {
                                            attrs: {
                                                align: 'center',
                                            },
                                            'class': {
                                                hrDiv: true
                                            }
                                        }, [
                                            h('hr', {
                                                attrs: {
                                                    width: '60px',
                                                    textAlign: 'center'
                                                }
                                            })
                                        ]),
                                        h('ul', [ // 启用禁用
                                            h('li', {
                                                style: {
                                                    textAlign: 'left',
                                                }
                                            }, [
                                                h('Button', {
                                                    props: {
                                                        type: 'text',
                                                        textAlign: 'left',
                                                    },
                                                    'class': {
                                                        forbiddenBtn: btn, // 审核状态控制
                                                        operationBtn: !btn,
                                                    },
                                                    on: {
                                                        click: () => {
                                                            //在这里执行操作的数据传参
                                                            //禁用启用操作
                                                            this.vehicleId = row.vehicleId; // 获得id
                                                            this.oldRemark = row.description; // 获得之前的
                                                            if(row.flowStatus == 1) {
                                                                if(forbidden == "禁用") {
                                                                    this.modalTitle = "禁用";
                                                                    this.operationType = 0; // 0 禁用 1 启用 2 批量禁用 3 批量启用 4 删除 5批量删除
                                                                    this.modalShow = true; //  显示输入原因的框
                                                                } else if(forbidden == "启用") {
                                                                    this.modalTitle = "启用";
                                                                    this.operationType = 1; // 0 禁用 1 启用 2 批量禁用 3 批量启用 4 删除 5批量删除
                                                                    this.modalShow = true; //  显示输入原因的框
                                                                }
                                                            } else {
//																this.$Notice.warning({
//																	title: '审核状态不符合，不能操作！',
//																	duration: 1
//																});
                                                                return;
                                                            }
                                                            //this.remove(params.index)
                                                        },
                                                    }
                                                }, forbidden),
                                            ])
                                        ]),
                                        h('ul', [ // 删除
                                            h('li', {
                                                style: {
                                                    textAlign: 'left',
                                                    width: '80px',
                                                }
                                            }, [
                                                h('Button', {
                                                    props: {
                                                        type: 'text',
                                                        textAlign: 'left',
                                                    },
                                                    'class': {
                                                        operationBtn: true,
                                                    },
                                                    on: {
                                                        click: () => {
                                                            //															console.log(params)
                                                            //在这里执行操作的数据传参
                                                            this.remove(params.index, params.row.vehicleId)
                                                        },
                                                    }
                                                }, "删除"),
                                            ])
                                        ]),
                                    ])
                                ])
                            ]);
                        }
                    },

                ],
                data1: [{name:'1',status:'0'},{name:'2'},{name:'3'},{name:'4'},{name:'4'},{name:'4'},{name:'4'},{name:'4'},{name:'4'},{name:'4'},{name:'4'}]
            }
        },
        methods: {
            //页码改变时
            onPageChange:function(page){
                this.currentPage = page
                this.queryList()
            },
            //每页尺寸改变时
            onPageSizeChange:function (size) {
                this.pageSize = size
                this.queryList()
            },
            //表格全选函数
            selectAll: function() {
                if(this.data1 && this.data1.length) {
                    for(var i = 0; i < this.data1.length; i++) {
                        this.data1[i]._checked = true
                    }
                    this.selects = this.data1.concat()
                    this.data1 = this.data1.concat()
                }
            },
            //表格反选函数
            unSelectAll: function() {
                if(this.selects.length == 0) {
                    this.selectAll()
                } else if(this.data1 && this.data1.length) {
                    var arr = new Array()
                    for(var i = 0; i < this.data1.length; i++) {
                        for(var j = 0; j < this.selects.length; j++) {
                            if(this.data1[i].driverId === this.selects[j].driverId) {
                                this.data1[i]._checked = false
                                break
                            } else {
                                if(j === this.selects.length - 1) {
                                    this.data1[i]._checked = true
                                    arr.push(this.data1[i]);
                                }
                            }
                        }
                    }
                    this.selects = arr
                    this.data1 = this.data1.concat()
                }
            },
            //表格勾选数据改变时
            onSelectChange:function (selection) {
                this.selects = selection
            },
            openForm:function () {
                this.driverId = undefined
                this.editFlag = true
                this.addModalSwitch = true
            },
            closeForm:function () {
                this.addModalSwitch = false
                this.queryList()
            },
//    查询列表，带分页和搜索条件
            queryList:function (flag) {
                var paramObj = {params:{}}
                var name = 'driver'
                if(this.searchText){
//          paramObj.params.data = {}
//          paramObj.params.data.searchText = this.searchText
                    name = 'driverSearch'
                    paramObj.params.data =  {
                        searchText: this.searchText,
                        filterSearchFields: [{
                            filterField: 'active',
                            FilterValue: '0'
                        }]
                    }
                    //如果是搜索框触发 的查询，初始化页码
                    if(flag){
                        this.currentPage = 1
                    }

                }
                paramObj.params.rows = this.pageSize
                paramObj.params.page = this.currentPage
                getData.get(name,paramObj)
                    .then(function(res) {
                        console.info(res)
                        if(res.data && res.data.data){
                            that.data1 = res.data.data
                        }
                        that.total = res.data.totalNum
                        that.loadComplied = true
                    })
                    .catch(function (error) {
                        that.loadComplied = true
                    })
            },
            // 打开批量操作
            openBatch: function(){
                if(!this.columns1[0].type){
                    this.columns1.unshift({
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    });
                    this.iconColor="#36a2ff";
                    this.batch=true;
                }else{
                    this.columns1.shift();
                    this.iconColor="#a8afb2";
                    this.batch=false;
                }
            },
        },
        created: function () {
            that = this
            that.loadComplied = true
            this.queryList()
        }
    }

</script>

<style lang="scss" >

.zlst-table{
    width: 100%;
    height: 100%;
    padding-right: 18px;
    padding-left: 18px;
    /*overflow: auto;
    min-width:1000px;*/

    .ivu-table-title{
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #e9eaec;
        padding-bottom: 12px;
        span{
            margin-right: 12px;
            height: 50px;
            cursor:pointer;
            .iconfont{
                font-size: 16px;
                &:hover{
                    color: #65BAF7;
                }
            }
        }
    }

    .ivu-table th {
        border: none;
        background-color: #f5f6f7;
        color: #A8AFB2;
        /*字体颜色*/
        font-size: 14px;
        height: 36px;
        /* 行高*/
    }
    /*单元格*/

    .ivu-table td {
        /*background-color: #f5f6f7;*/
        font-size: 14px;
        color: #506470;
        height: 48px;
        /* 行高*/
    }

    //这里修改表格的偶数行背景色
    .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td{
        background-color: #f8f9fa;
    }

    //表格行悬浮 背景色
    .ivu-table-row-hover td{
        background-color: #EDF1F4 !important;
    }

    .ivu-table-footer{
        height: 48px;
        line-height: 48px;
        border-top: 1px dashed #e9eaec;
    }
    /*详情操作*/

    .operationIcon {
        margin-left: 5px;
        color: #dddee1;
    }

    .operationDiv {
        cursor: pointer;
    }

    .hrDiv {
        margin-bottom: 10px;
        margin-top: 5px;
    }

    hr {
        margin-top: 7px;
        margin: 0;
        border: 0;
        color: #dddee1;
        background-color: #dddee1;
        height: 1px;
    }

    ul .ivu-btn {
        text-align: left;
        border-radius: 0px;
        /*按钮边角变尖*/
        width: 94px;
        height: 28px;
        padding-left: 15px;
        font-size: 14px; /* 详情框字体*/

    }

    ul .ivu-btn span {
        position: relative;
        bottom: 3px;
    }

}





</style>
